import React, { useState, useEffect } from 'react'
import Header from '../components/Header';
import Bottom from '../components/Bottom';
import Recommend from './Recommend';
import './Show.css'
import { NavLink, Route, Switch } from 'react-router-dom'
import quanicon from '../images/全部作品图标.png'
import jingicon from '../images/精品图片图标.png'
import axios from "axios";
import { Input, Carousel, Button } from 'antd';
import Myattentions from './Myattentions';

const { Search } = Input;
const onSearch = (value) => console.log(value);
const Show = (props) => {
    console.log(props.location.state)
    let user = props.location.state.user;
    const [CarimgList, setCarimgList] = useState([]);
    useEffect(() => {
        axios.get("http://192.168.72.166:8080/api/getShowDatas").then(res => {
            const data = res.data.data;
            data.forEach(item => {
                let show_image = 'http://192.168.72.166:8080/' + item.show_name;
                item.show_name = show_image
            })
            setCarimgList(data)
        })
    }, [])
    return (
        <div >
            <Header />
            <div className='show'>
                <div className='design'>
                    <div className='designLeft'>
                        <div className='list-inner'>
                            <span>分类</span>
                            <div className='classify'>
                                <div>大通文化</div>
                                <div>文化IP类衍生</div>
                            </div>
                            <button className='more'>{'>'}</button>
                        </div>
                        <div className='list-inner'>
                            <span>风格</span>
                            <div className='classify'>
                                <div>文艺</div>
                                <div>简约</div>
                                <div>轻奢</div>
                                <div>创新</div>
                                <div>复古</div>
                            </div>
                            <button className='more'>{'>'}</button>
                        </div>
                        <div className='list-inner'>
                            <span>色系</span>
                            <div className='classify'>
                                <div>红</div>
                                <div>黑</div>
                                <div>白</div>
                                <div>灰</div>
                                <div>粉</div>
                                <div>黄</div>
                                <div>绿</div>
                                <div>蓝</div>
                            </div>
                            <button className='more'>{'>'}</button>
                        </div>
                        <div className='list-inner'>
                            <span>类型</span>
                            <div className='classify'>
                                <div>牛皮封装袋</div>
                                <div>纸类脚手架</div>
                            </div>
                            <button className='more'>{'>'}</button>
                        </div>
                        <div className='list-inner-search'>
                            <Search
                                placeholder="共有3869套方案"
                                onSearch={onSearch}
                                style={{
                                    width: 240,
                                    marginTop: '10px'
                                }}
                            />

                        </div>
                        <div className='list-inner-show'>
                            <div>
                                <img src={quanicon} style={{ width: "36px", height: "36px" }} />
                                <a>全部作品</a>
                            </div>
                            <div>
                                <img src={jingicon} />
                                <a>精品单图</a>
                            </div>

                        </div>
                    </div>
                    <div className='designRight'>
                        <Carousel>
                            {
                                CarimgList.map(item => {
                                    if (item.show_token === 'design_show')
                                        return (
                                            <div key={item.show_id}>
                                                <img className='contentStyle' src={item.show_name} />
                                            </div>
                                        )
                                })
                            }
                        </Carousel >
                    </div>
                </div>
                <div className='content'>
                    <div className='content-banner'>
                        <div className='btn'>
                            <NavLink to={{ pathname: '/show/concern', state: { user: user } }} activeClassName='banner-active'><div> 我的关注 </div></NavLink>
                        </div>
                        <div className='btn'>
                            <NavLink to={{ pathname: '/show', state: { user: user } }} exact activeClassName='banner-active'><div> 全部推荐 </div></NavLink>
                        </div>
                    </div>
                    <div className='show-content'>
                        <Switch>
                            <Route exact path='/show' component={Recommend}></Route>
                            <Route path='/show/concern' component={Myattentions}></Route>
                        </Switch>
                    </div>
                </div>
            </div>
            <Bottom />
        </div>
    )
}
export default Show;

